<template>
  <dl>
    <dt class="fs40 pb20 fw-b">默认</dt>
    <dd class="pb20 d-f gap20">
      <t-button @click="pickerVisible1=true">开启</t-button>
      <t-picker v-model="value1" v-model:visible="pickerVisible1" :data="data1" />
    </dd>
    <dd class="pb20 d-f gap20">
      {{ value1 }}
    </dd>
    <dd class="mt20">
      <pre v-highlight="picker1"><code></code></pre>
    </dd>
  </dl>
  <dl class="pt40">
    <dt class="fs40 pb20 fw-b">disabled | 默认对象</dt>
    <dd class="pb20 d-f gap20">
      <t-button @click="pickerVisible2=true">开启</t-button>
      <t-picker v-model="value2" v-model:visible="pickerVisible2" :data="data2" />
    </dd>
    <dd class="pb20 d-f gap20">
      {{ value2 }}
    </dd>
    <dd class="mt20">
      <pre v-highlight="picker2"><code></code></pre>
    </dd>
  </dl>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { TPickerData } from '@/base/types/components'

const pickerVisible1 = ref<boolean>(false)
const value1 = ref(1)
const data1: TPickerData[] = [
  { text: 11111, value: 1 },
  { text: '22222', value: 2 },
  { text: 33333, value: 3 },
  { text: '44444', value: 4 },
  { text: 55555, value: 5 }
]

const pickerVisible2 = ref<boolean>(false)
const value2 = ref({ text: 11111, value: 1 })
const data2: TPickerData[] = [
  { text: 11111, value: 1 },
  { text: '22222', value: 2, disabled: true },
  { text: 33333, value: 3 },
  { text: '44444', value: 4, disabled: true },
  { text: 55555, value: 5 }
]

const picker1 = `<t-button @click="pickerVisible=true">开启</t-button>
<t-picker v-model="value" v-model:visible="pickerVisible" :data="data" />

import type { TPickerData } from '@/base/types/components'
const pickerVisible = ref<boolean>(false)
const value = ref(1)
const data: TPickerData[] = [
  { text: 11111, value: 1 },
  { text: '22222', value: 2 },
  { text: 33333, value: 3 },
  { text: '44444', value: 4 },
  { text: 55555, value: 5 }
]`
const picker2 = `<t-button @click="pickerVisible2=true">开启</t-button>
<t-picker v-model="value2" v-model:visible="pickerVisible2" :data="data2" />

import type { TPickerData } from '@/base/types/components'
const pickerVisible = ref<boolean>(false)
const value = ref({ text: 11111, value: 1 })
const data2: TPickerData[] = [
  { text: 11111, value: 1 },
  { text: '22222', value: 2, disabled: true },
  { text: 33333, value: 3 },
  { text: '44444', value: 4, disabled: true },
  { text: 55555, value: 5 }
]`
</script>

<style scoped lang="scss">

</style>
